<template>
  <div class='my-shops'>
    <header>我的店铺</header>
    <div class="shop-info">
      <Title title="关于店铺" class="shop-info-head" />
      <div class="real-info">
        <p v-for="(item, index) in modelData" :key="index">
          <span>{{item.label}}：</span>
          <span v-if="item.islabel">{{info[item.prop]}}</span>
          <UploadImg v-else-if="item.isUpload" :defaultImg0="info[item.prop]" :keys="item.prop"  @success="success" />
          <el-input v-else-if="item.isInput" v-model="info[item.prop]" :placeholder="'请输入'+item.label"></el-input>
          <ComAddress v-else-if="item.isAddress" :info="info" :prop="item.prop"  @handleAddress="success" />
          <span v-else-if="item.isRadio">
            <el-radio v-model="info[item.prop]" label="1">是</el-radio>
            <el-radio v-model="info[item.prop]" label="0">否</el-radio>
          </span>
        </p>
      </div>
      <div v-if="this.info.process==1">
        <Title title="视频接口" class="shop-info-head" />
        <div class="real-info">
          <p><span>视频接口：</span><el-input v-model="info.videoInterface" placeholder="请输入视频接口"></el-input></p>
        </div>
      </div>
      <el-button type="success" class="btn-submit"  @click="submit">提交</el-button>
    </div>
  </div>
</template>
<script>
import Title from '../../buyer/overview/head.vue'
import UploadImg from '@/components/upload/uploadImg.vue'
import ComAddress from '@/components/address.vue'
export default {
  components: {Title,UploadImg,ComAddress},
  name: "",
  data() {
    return {
      modelData:[
        {prop:"logo",label:"店铺logo",isUpload:true,checked:true},
        {prop:"name",label:"店铺名称",islabel:false,isInput:true,checked:true},
        {prop:"address",label:"店铺地址",islabel:false,isAddress:true,checked:true},
        {prop:"addressInfo",label:"详细地址",islabel:false,isInput:true,checked:true},
        {prop:"businessScope",label:"经营范围",islabel:false,isInput:true,checked:true},
        {prop:"process",label:"仓储加工",isRadio:true,checked:true},
        {prop:"spotGoods",label:"现货商家",isRadio:true,checked:true},
      ],
      info:{
        logo:"",
        name:"",
        address:[],
        addressInfo:"",
        businessScope:"",
        process:"",
        spotGoods:"",
        videoInterface:""
      }
    };
  },
  methods: {
    submit(){
      if(_g.checkParams(this.modelData,this.info))return
      let params={...this.info}
      params.address=params.address.join('/')
      _g.apiPost('merchant/insertOrUpdateMerchant.do',params).then(res=>{
        _g.toMessage(res)
      })
    },

    success(val){
      this.info[val.key]=val.data||val.value
    },

    init(){
      _g.apiPost('merchant/getMerchant.do').then(res=>{
        for(var key in this.info){
          this.info[key]=res.data[key]
        }
        if(res.data.id){
          this.info.id=res.data.id
          this.info.process=this.info.process.toString()
          this.info.spotGoods=this.info.spotGoods.toString()
          this.info.address=this.info.address.split('/')
        }
      })
    }
  },
  created() {
    this.init()
  },
};
</script>
<style lang="scss" scoped>
.my-shops {
  font-size: 14px;

  header{
    line-height: 50px;
    text-indent: 20px;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
  }
  .shop-info{
    box-sizing: border-box;
    padding: 30px 50px;

    .shop-info-head{
      font-size: 16px;
      margin-top: 20px;
    }
    .real-info{
      line-height: 35px;
      padding-left: 25px;

      >p{
        margin: 20px 0;
        display: flex;

        >span:nth-child(1){
          display: inline-block;
          width: 75px;
        }
      }
    }
  }
  .btn-submit{
    width: 170px;
    padding: 0 20px;
    line-height: 36px;
    border-radius: 0;
    margin: 20px;
  }
}
</style>